<template>
  <div class="order_content">
    <div class="order_item" v-for="c in orderOver" :key="c.id">
      <div>
        订单编号：
        <span>{{c.id}}</span>
      </div>
      <div>
        <div>
          产品名称：
          <span>{{c['orderLines'][0]['product']['name']}}</span>
        </div>
        <div>
          产品描述：
          <span>{{c['orderLines'][0]['product']['description']}}</span>
        </div>
        <div>
          服务时间：
          <span>{{c.orderTime | dateParse}}</span>
        </div>
        <div>
          服务地点：
          <span>{{(((c==null)?'--':c.address)==null)?'':(c.address.province+c.address.city+c.address.area+c.address.address)}}</span>
        </div>
      </div>
      <div class="order_botton">
        <span @click="payment">确认支付</span>
        <span @click="payWait">确认订单</span>
      </div>
      <div class="order_details" @click="todetails(c.id)">详情</div>
      <div class="order_text">
        共计
        <span>{{c['orderLines'][0]['number']}}</span>个服务，合计￥
        <span>{{c.total}}</span>
      </div>
      <div class="order_laber">
        <span>{{c.status}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { Toast } from 'vant';
export default {
  data() {
    return {
    };
  },
  computed:{
    ...mapState('order',['orderOver'])
  },
  created(){
    this.load();
  },
  methods:{
    ...mapActions('order',['loadOrderOver']),
    load(){
      let id =localStorage.getItem('id')
      let status = '已完成'
      this.loadOrderOver('customerId='+id+'&status='+status)
    },
    payment(){
      Toast('余额不足请充值！');
    },
    payWait(){
        Toast.loading({
        message: '加载中...',
        forbidClick: true,
        });
    },
    todetails(id){
      this.$router.push({path:'orderDetails',query:{id:id}})
    }
  }
};
</script>
<style scope>
  .order_content{
    width:100%;
  }
  .order_item{
    width: 92%;
    height:150px;
    margin: 0 auto;
    margin-top:5px;
    padding:10px 5px;
    background-color: #fff;
    border: 1px solid#eee;
    border-radius: 7px;
    font-size:14px;
    position: relative;
  }
  .order_item>div:nth-child(2){
    padding-left:20px;
  }
  .order_botton{
    margin-top:7px;
  }
  .order_botton>span{
    padding:4px;
    color:#FF976A;
    border:1px solid #FFCBB4;
    border-radius: 5px;
    margin-left:15px;
    cursor: pointer;
  }
  .order_details{
    text-align:right;
    margin-right:5px;
    cursor: pointer;
  }
  .order_text{
    text-align: right;
    font-size:12px;
    margin-right:5px;
  }
  .order_laber{
    position: absolute;
    top:10px;
    right:10px;
    font-size:11.5px;
    color:#FD621F;
  }
</style>